<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery滑动效果及事件切换</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none
        }
    </style>
</head>
<body>
    <div>
        <p>事件切换：hover(事件1，事件2)</p>
        <p>如果 hover()中只写一个函数，那么鼠标进入和离开都会触发这个函数。</p>
    </div>
    <div class="wrap">
        <button>下拉滑动</button>
        <button>上拉滑动</button>
        <button>切换滑动</button>
        <button>事件切换1</button>
        <button>事件切换2</button>
        <div class="box"></div>
    </div>
    <script>
        $(function(){
            $('button').eq(0).mouseover(function(){
                //下滑动
                $('.box').slideDown(500)
            });
            $('button').eq(1).mouseout(function(){
                //上滑动
                $('.box').slideUp(500)
            });
            $('button').eq(2).mouseover(function(){
                //切换滑动
                $('.box').slideToggle(500);
            });
            $('button').eq(3).hover(function(){
                $('.box').slideDown(500)
            },function(){
                $('.box').slideUp(500)
            });
            $('button').eq(4).hover(
                function(){$('.box').slideToggle(500)
            });
        })
    </script>
</body>
</html>